<template>
  <div class="dialog">
    <el-dialog title="任务配置" :visible.sync="dialogFormVisible" top="15px">
      <el-button v-if="copy" type="text">tips：来自粘贴数据</el-button>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="任务名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model.trim="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="任务地址" prop="url" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off" />
        </el-form-item>
        <el-form-item label="请求方式" prop="method" :label-width="formLabelWidth">
          <el-select v-model="form.method" placeholder="请选择请求方式">
            <el-option label="POST" value="post" />
            <el-option label="GET" value="get" />
            <el-option label="PUT" value="put" />
            <el-option label="DELETE" value="delete" />
          </el-select>
        </el-form-item>
        <el-form-item label="请求类型" prop="contentType" :label-width="formLabelWidth">
          <el-select v-model="form.contentType" placeholder="请选择请求类型">
            <el-option label="json" value="json" />
            <el-option label="form" value="form" />
            <el-option label="text" value="text" />
          </el-select>
        </el-form-item>
        <el-form-item label="执行时间" prop="cron" :label-width="formLabelWidth">
          <el-date-picker v-model="form.cron" type="datetime" placeholder="选择日期时间" />
        </el-form-item>
        <el-form-item label="请求data" prop="data" :label-width="formLabelWidth">
          <el-input v-model="form.data" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item label="请求headers" prop="headers" :label-width="formLabelWidth">
          <el-input v-model="form.headers" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item label="Cookies" prop="Cookies" :label-width="formLabelWidth">
          <el-input v-model="form.Cookies" type="textarea" :rows="2" />
        </el-form-item>
        <el-form-item label="是否每天执行" prop="data" :label-width="formLabelWidth">
          <el-radio-group v-model="form.isEveryday">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'Renwudialog',
  props: {
    form: {
      type: Object,
      default: () => {
      }
    },
    copy: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const checkJson = (rule, value, callback) => {
      try {
        if (value) {
          JSON.parse(value)
        }
      } catch (e) {
        callback(new Error('json格式错误'))
      }
      callback()
    }
    return {
      dialogFormVisible: true,
      formLabelWidth: '120px',
      rules: {
        name: [{ required: true, message: '请输入脚本名称', trigger: 'blur' }],
        url: [{ required: true, message: '请输入脚本请求地址', trigger: 'blur' }],
        method: [{ required: true, message: '请选择脚本请求方式', trigger: 'change' }],
        contentType: [{ required: true, message: '请选择脚本请求数据类型', trigger: 'change' }],
        cron: [{ required: true, message: '请选择脚本执行时间', trigger: 'blur' }],
        data: [{ validator: checkJson, trigger: 'blur' }],
        headers: [{ validator: checkJson, trigger: 'blur' }]
      }
    }
  },
  watch: {
    dialogFormVisible(status) {
      this.$emit('dialogVisible', status)
    }
  },
  methods: {
    // 提交
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.data = this.form.data ? JSON.parse(this.form.data) : {}
          this.form.headers = this.form.headers ? JSON.parse(this.form.headers) : {}
          if (this.copy) delete this.form._id
          this.$emit('dialogForm', this.form)
          this.$emit('dialogVisible', false)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px;
}
</style>
